<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: Helvetica,serif;
        }

        svg {
            width: 500px;
            height: 500px;
        }

        .top-label {
            font-size: 13px;
            font-style: italic;
            text-transform: uppercase;
            float: left;
        }

        .age-label {
            text-align: right;
            font-weight: bold;
            width: 90px;
            padding-right: 10px;
        }

        .clearfix {
            clear: both;
        }

        .bar {
            fill: darkslateblue;
        }

        .bar-label {
            text-anchor: end;
        }

        .axis-label {
            text-anchor: middle;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>
        var popData=[1.6, 1.5, 2.1, 2.6, 3.4, 4.5, 5.1, 6.0, 6.6, 7.1, 7.3, 8.1, 8.9, 8.8, 8.6, 8.8, 9.3];
        var axisData=[0, 2.5, 5.0, 7.5];
        var barLabels=["80 and up", "75-79", "70-74", "65-69", "60-64", "55-59", "50-54", "45-40",
                        "40-44", "35-39", "30-34", "25-29", "20-24", "15-19", "10-14","5-9","0-4"];
        var width=400,
            leftMargin=100,
            topMargin=30,
            barHeight=20,
            barGap=5,
            tickGap=5,
            tickHeight=10,
            scaleFactor=width/popData[16],
            barSpaceing = barHeight +barGap,
            translateText="translate("+ leftMargin+","+topMargin+")",
            scaleText="scale("+scaleFactor+",1)";

        const body = d3.select("body");
        body.append("h2")
            .text("Age distribution of the world, 2010");

        body.append("div")
                .attr("class","top-label age-label")
            .append("p")
                .text("age group");

        body.append("div")
                .attr("class","top-label")
            .append("p")
                .text("portion of the population");

        body.append("div")
            .attr("class","clearfix");

        var svg = body.append("svg")
            .append("g")
            .attr("transform",translateText);

        var barGroup=svg.append("g")
            .attr("transform",scaleText)
            .attr("class","bar");
        for (let i = 0; i < popData.length; i++) {
            barGroup.append("rect")
                        .attr("x",0)
                        .attr("y",i*barSpaceing)
                        .attr("height",barHeight)
                        .attr("width",popData[i]);
        }

        var barLabelGroup = svg.append("g")
                                    //.attr("transform",translateText)
                                    .attr("class","bar-label");

        for (let i = 0; i < barLabels.length; i++) {
            barLabelGroup.append("text")
                            .attr("x",-10)
                            .attr("y",i*barSpaceing+barHeight*(2/3))
                            .text(barLabels[i]);
        }

        var axisTickGroup = svg.append("g")
                                    //.attr("transform",translateText)
                                    .attr("stroke","black");

        var axisLabelGroup=svg.append("g")
                                    //.attr("transform","translate(100,30)")
                                    .attr("class","axis-label");

        for (let i = 0; i < axisData.length; i++) {
            axisTickGroup.append("line")
                .attr("x1",axisData[i] * scaleFactor)
                .attr("x2",axisData[i]*scaleFactor)
                .attr("y1",0)
                .attr("y2",-tickHeight);

            axisLabelGroup.append("text")
                .attr("x",axisData[i]*scaleFactor)
                .attr("y",-tickHeight-tickGap)
                .text(axisData[i]+"%");
        }
        var a;
    </script>
</body>
</html>